<template>
	<view class="productDetails">
		<view class="main">
			<view class="handle">

				<view class="top">
					<view class="topTit" v-if="data.index == 2">
						<view class="">
							<view class="left">
								<image src="/static/img/index/141.png" mode="widthFix"></image>
								已退款
							</view>
							￥{{data.info.refundAmount}}
						</view>
						已原路返回
					</view>
					{{data.index != 2?'等待商家处理':''}}
					<view class="top">
						<view class="topList">
							<view :class="[index<=data.index?'active':'',index<data.index?'active1':'']" class=""
								v-for="(item,index) in 3" :key="index">
								<text></text>
								<view class="" v-if="index != 2">

								</view>
							</view>
						</view>
						<view class="topList_1">
							<text>提交申请</text>
							<text>商户处理</text>
							<text>退款成功</text>
						</view>
					</view>
				</view>
				<view class="des">
					{{data.info.refundState.value == 'REJECT'?'商户审核拒绝':'您已成功发起退款申请，等待商户处理'}}
					<text>如果商家拒绝，您可以修改退款申请后再次发起，商家会重新处理。</text>
					<text v-if="data.info.refundState.value == 'REJECT'">请于24小时内修改申请重新提交，逾期未提交，退款申请将关闭。</text>
				</view>
			</view>

			<view class="refund">
				退款商品
				<view class="goods">
					<view class="left">
						<image :src="data.httpUrl+'/app/file/viewFile?fileId='+data.info.mainPictureId"
							mode="aspectFill"></image>
					</view>
					<view class="right">
						<text class="ellipsis_2">{{data.info.spuName}}</text>
						<view>
							{{data.info.specName}}，{{data.info.specValue}}
							<text>x {{data.info.count}}</text>
						</view>
						<view class="attr">
							<text  v-for="(item2,index2) in data.info.attrs" :key="index2">{{item2.propertyName}}：{{item2.propertyValue}};</text>
						</view>
					</view>
				</view>
			</view>
			<view class="refundInfo">
				<view class="top">
					退款信息
				</view>
				<view class="listItem">
					退款原因：
					<view class="">
						{{data.info.reason}}
					</view>
				</view>
				<view class="listItem">
					退款金额：
					<view class="">
						¥{{data.info.refundAmount}}
					</view>
				</view>
				<view class="listItem">
					申请时间：
					<view class="">
						{{data.info.createTime}}
					</view>
				</view>
				<view class="listItem">
					退款流水号:
					<view class="">
						{{data.info.refundNo}}
					</view>
				</view>
			</view>
		</view>
		<view class="bot" v-if="data.index != 2">
			<text @tap="edit">修改申请</text>
			<text @tap="revoke" v-if="data.info.refundState.value != 'REJECT'">撤销申请</text>
		</view>
	</view>
</template>

<script lang="ts" setup>
	//退款
	import { getRefundDetail, cancelRefund } from '@/utils/api/goods'
	import { reactive } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	const data = reactive<any>({
		index: 1,
		bool: true,
		info: { refundState: {} },
		httpUrl: getApp().globalData.baseUrl,
	})
	onLoad(({ refundNo, refundState }) => {
		data.refundNo = refundNo;
		if (refundState == 'SUCCESS') {
			data.index = 2;
		}

	})
	onShow(() => {
		getRefundDetail({ data: { refundNo: data.refundNo } }).then((res) => {
			data.info = res.data;
		})
	})
	const revoke = () => {
		uni.showModal({
			title: '提示',
			content: '是否撤销退款?',
			success: (e) => {
				if (e.confirm) {
					uni.showLoading({
						title: '加载中...',
						mask: true
					})
					cancelRefund({ data: { refundNo: data.refundNo } }).then((res) => {
						if (res.code == 200) {
							uni.showToast({
								title: '撤销成功!',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateBack()
							}, 1000)
						}
					})
				}
			}
		})
	}
	const edit = () => {
		uni.navigateTo({
			url: '/pages/requestRefund/index?refundNo=' + data.info.refundNo
		})
	}
</script>

<style lang="scss">
	.attr {
		
		text{
			font-size: 24rpx;
			color: #8C8C8C;
			display: inline-block;
			margin-right: 10rpx;
			margin: 0!important;
		}
	}
	.productDetails {
		height: 100vh;
		display: flex;
		background: #F4F6FA;
		flex-direction: column;

		.main {
			flex: 1;
			padding: 24rpx;

			>.negotiation {
				padding: 24rpx;
				border-radius: 24rpx;
				background: #fff;
				font-size: 32rpx;
				margin-bottom: 16rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;

				image {
					width: 36rpx;
				}
			}

			.handle {
				.topTit {
					font-size: 24rpx;
					color: #8C8C8C;
					margin-bottom: 20rpx;

					>view {
						margin-bottom: 8rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						font-size: 32rpx;
						color: #EB432F;

						.left {
							display: flex;
							align-items: center;
							font-size: 32rpx;
						}
					}

					image {
						margin-right: 8rpx;
						width: 36rpx;
					}
				}

				>.top {
					padding: 24rpx;
					border-radius: 24rpx;
					background: #fff;
					font-size: 32rpx;

					.topList {
						display: flex;
						padding: 0 40rpx;

						>view {
							margin-top: 20rpx;
							display: flex;
							justify-content: space-between;
							align-items: center;

							text {
								width: 18rpx;
								height: 18rpx;
								border-radius: 50%;
								// border: 2rpx solid #6B64D3;
								background: #EFEFEF;
							}

							view {
								width: 260rpx;
								height: 3rpx;
								background: #EFEFEF;
							}
						}

						.active {
							text {
								background: #6B64D3;
							}

						}

						.active1 {
							view {

								background: #6B64D3;
							}
						}

					}

					.topList_1 {
						display: flex;
						justify-content: space-between;
						margin-top: 16rpx;

						text {
							font-size: 24rpx;
						}
					}
				}

				>.des {
					padding: 24rpx;
					border-radius: 24rpx;
					background: #fff;
					font-size: 32rpx;
					margin: 16rpx 0;
					display: flex;
					flex-direction: column;

					text:nth-of-type(1) {
						font-size: 24rpx;
						color: #8C8C8C;
						line-height: 1.8;
					}

					text:nth-of-type(2) {
						font-size: 24rpx;
						color: #F53F3F;
						line-height: 1.8;
					}
				}
			}

			>.refund {
				padding: 24rpx;
				border-radius: 24rpx;
				background: #fff;
				font-size: 32rpx;

				.goods {
					display: flex;
					margin-top: 24rpx;

					.left {
						width: 150rpx;
						height: 150rpx;
						background: #ccc;
						margin-right: 24rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.right {
						flex: 1;
						display: flex;
						flex-direction: column;
						justify-content: space-between;

						view:nth-of-type(1){
							color: #8C8C8C;
							display: flex;
							align-items: center;
							justify-content: space-between;
						}
					}
				}
			}

			>.refundInfo {
				border-radius: 24rpx;
				background: #fff;
				padding: 24rpx;
				margin-top: 24rpx;

				.top {
					font-size: 32rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;

					.right {
						padding: 8rpx 16rpx;
						border-radius: 8rpx;
						color: #1188FF;
						border: 2rpx solid #1188FF;
						display: flex;
						align-items: center;

						image {
							width: 32rpx;
							margin-right: 10rpx;
						}
					}
				}

				.listItem {
					display: flex;
					align-items: center;
					justify-content: space-between;
					color: #8C8C8C;
					margin-top: 20rpx;

					view {
						display: flex;
						align-items: center;
						flex: 1;
						margin-left: 24rpx;
						justify-content: flex-end;
						text-align: right;

						image {
							width: 27rpx;
							margin-left: 21rpx;
						}
					}
				}
			}

		}

		>.bot {
			padding: 18rpx 32rpx 50rpx 0;
			display: flex;
			justify-content: flex-end;
			background: #fff;

			text {
				width: 160rpx;
				line-height: 64rpx;
				text-align: center;
				margin-left: 16rpx;
				border-radius: 64rpx;
			}

			text:nth-of-type(1) {
				border: 2rpx solid #D9D9D9;
			}

			text:nth-of-type(2) {
				color: #fff;
				background: #6B64D3;
			}
		}
	}
</style>